<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <eHeader :dict="dict" :permission="permission" />
      <crudOperation :permission="permission" />
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
      @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="antonCode" label="安东编码" />
      <el-table-column prop="antonEvent" label="安东事件" />
      <el-table-column prop="antonTypeName" label="安东类型">
        <template slot-scope="scope">
          {{ dict.label.antonConfig_type[scope.row.antonTypeName] }}
        </template>
      </el-table-column>
      <el-table-column prop="model" label="安东模式">
        <template slot-scope="scope">
          {{ dict.label.antonConfig_model[scope.row.model] }}
        </template>
      </el-table-column>
      <el-table-column prop="isDisable" label="是否启用" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isDisable" active-color="#409EFF" inactive-color="#F56C6C" :active-value="'1'"
            :inactive-value="'0'" @change="changeEnabled(scope.row, scope.row.isDisable)" />
        </template>
      </el-table-column>
      <el-table-column prop="level" label="安东级别">
        <template slot-scope="scope">
          {{ dict.label.antonConfig_level[scope.row.level] }}
        </template>
      </el-table-column>
      <el-table-column prop="antonConfigDevices" label="设备编码">

        <template slot-scope="scope">
          <el-popover placement="right" width="400" trigger="click">
            <el-table :data="deviceTableData">
              <el-table-column width="100" property="deviceCode" label="设备编码"></el-table-column>
              <el-table-column width="300" property="deviceName" label="设备名称"></el-table-column>
            </el-table>
            <el-button slot="reference" @click="getDeviceCodes(scope.row.antonConfigDevices)">设备信息</el-button>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建日期" />
      <!--   编辑与删除   -->
      <el-table-column v-if="checkPer(['admin', 'antonConfig:edit', 'antonConfig:del'])" label="操作" width="130px"
        align="center" fixed="right">
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <!--表单渲染-->
    <eForm :dict="dict" />
  </div>
</template>

<script>
import crudAntonConfig from '@/api/anton/antonConfig'
import eHeader from './module/header'
import eForm from './module/form'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'



export default {
  name: 'AntonConfig',
  components: { eHeader, eForm, crudOperation, pagination, udOperation, crudAntonConfig },
  cruds () {
    return CRUD({
      title: '安东配置',
      url: 'api/antonConfig',
      sort: ['id'],
      crudMethod: { ...crudAntonConfig },
      optShow: {
        add: true,
        edit: false,
        del: false,
        download: false,
        reset: false,
        import: false,
      },

    })
  },
  mixins: [presenter()],
  // 数据字典
  dicts: ['antonConfig_state', 'antonConfig_level', 'antonConfig_type', 'antonConfig_model'],
  data () {
    return {
      permission: {
        add: ['admin', 'antonConfig:add'],
        edit: ['admin', 'antonConfig:edit'],
        del: ['admin', 'antonConfig:del']
      }, deviceTableData: []
    }
  },
  methods: {
    // 改变状态
    changeEnabled (data, val) {
      this.$confirm('此操作将 "' + this.dict.label.antonConfig_state[val] + '" ' + '安东编码为:' + data.antonCode + '的配置, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // eslint-disable-next-line no-undef
        crudAntonConfig.edit(data).then(() => {
          // eslint-disable-next-line no-undef
          this.crud.notify(this.dict.label.antonConfig_state[val] + '成功', 'success')
        }).catch(err => {
          if (data.isDisable === '0') {
            data.isDisable = '1'
          } else {
            data.isDisable = '0'
          }
          console.log(err.data.message)
        })
      }).catch(() => {
        if (data.isDisable === '0') {
          data.isDisable = '1'
        } else {
          data.isDisable = '0'
        }
      })
    },
    //获取当前安东配置的设备编码
    getDeviceCodes (data) {
      this.deviceTableData = [];
      data.forEach(item => {
        var deviceItem = { deviceCode: '', deviceName: '' }
        deviceItem.deviceCode = item.deviceCode
        deviceItem.deviceName = item.deviceName
        this.deviceTableData.push(deviceItem)
      });
    }
  },
  mounted () {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
